<template>
  <div class="edit-newgoods-code">
    <h2 class="h2-title">新增商品编码</h2>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row :gutter="20">
        <el-col :span="6"
          ><el-form-item label="商品类型" prop="type">
            <el-select v-model="ruleForm.type">
              <el-option label="素金类" value="素金类"></el-option>
              <el-option label="镶金类" value="镶金类"></el-option>
              <el-option
                label="混合类"
                value="混合类"
              ></el-option> </el-select></el-form-item></el-col>

        <el-col :span="6"
          ><el-form-item label="商品编码" prop="coding">
            <el-input v-model="ruleForm.coding"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="10"
          ><el-form-item label="商品名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
          ><el-form-item label="模具号" prop="mold">
            <el-input v-model="ruleForm.mold"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="供应商" prop="provider">
            <el-input v-model="ruleForm.provider"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="款号" prop="stylenumber">
            <el-input
              v-model.number="ruleForm.stylenumber"
              ref="ruleForm.stylenumber"
              @input="limitOrder"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="电商款号" prop="ebusiness">
            <el-input
              v-model.number="ruleForm.ebusiness"
              ref="ruleForm.ebusiness"
              @input="limitOrder"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6"
          ><el-form-item label="成色" prop="colour">
            <el-select v-model="ruleForm.colour">
              <el-option label="18K金" value="18K金"></el-option>
              <el-option label="18K铂金" value="18K铂金"></el-option>
              <el-option
                label="混合类"
                value="混合类"
              ></el-option> </el-select></el-form-item
        ></el-col>

        <el-col :span="6"
          ><el-form-item label="石料" prop="stone">
            <el-select v-model="ruleForm.stone">
              <el-option label="纯金" value="纯金"></el-option>
              <el-option label="钻石" value="钻石"></el-option>
              <el-option
                label="纯银"
                value="纯银"
              ></el-option> </el-select></el-form-item
        ></el-col>

        <el-col :span="6"
          ><el-form-item label="款式" prop="style">
            <el-select v-model="ruleForm.style">
              <el-option label="项链" value="项链"></el-option>
              <el-option label="手镯" value="手镯"></el-option>
              <el-option
                label="戒指"
                value="戒指"
              ></el-option> </el-select></el-form-item
        ></el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6"
          ><el-form-item label="颜色" prop="color">
            <el-input v-model="ruleForm.color"></el-input> </el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="规格" prop="specification">
            <el-input
              v-model="ruleForm.specification"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="别名" prop="anothername">
            <el-input v-model="ruleForm.anothername"></el-input> </el-form-item
        ></el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6"
          ><el-form-item label="商品重量" prop="weight">
            <el-input v-model="ruleForm.weight"></el-input> </el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="手寸" prop="hand">
            <el-input v-model="ruleForm.hand"></el-input> </el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="成本价(元)" prop="price">
            <el-input v-model="ruleForm.price"></el-input> </el-form-item
        ></el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- <el-col :span="6"><el-form-item label="标签单价(元)" prop="labelprice">
        <el-input v-model="ruleForm.labelprice"></el-input>
        </el-form-item></el-col> -->

        <el-col :span="6"
          ><el-form-item label="销售工费计价类型" prop="wage_valuation">
            <el-select v-model="ruleForm.wage_valuation">
              <el-option label="重量" value="重量"></el-option>
              <el-option
                label="损耗"
                value="损耗"
              ></el-option> </el-select></el-form-item
        ></el-col>

        <el-col :span="6"
          ><el-form-item label="销售价(元)" prop="saleprice">
            <el-input v-model="ruleForm.saleprice"></el-input> </el-form-item
        ></el-col>
      </el-row>

      <el-row>
        <!-- <el-col :span="8"><el-form-item label="库存计算" prop="inventory">
        <el-radio v-model="ruleForm.inventory"  name="inventory">计算</el-radio>
        <el-radio v-model="ruleForm.inventory"  name="inventory">不计算</el-radio>
        </el-form-item></el-col> -->
        <el-col :span="6"
          ><el-form-item label="库存计算" prop="count">
            <el-radio-group v-model="ruleForm.count">
              <el-radio label="计算" checked></el-radio>
              <el-radio label="不计算"></el-radio>
            </el-radio-group> </el-form-item
        ></el-col>

        <el-col :span="6"
          ><el-form-item label="提成分类" prop="classify">
            <el-input v-model="ruleForm.classify"></el-input> </el-form-item
        ></el-col>
      </el-row>

      <!--上传图片-->
      <el-row :gutter="30">
        <el-col :span="10"
          >上传图片：
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-col>
      </el-row>

      <el-form-item class="operation-line">
        <el-button
          type="primary"
          @click="
            submitForm('ruleForm')
            
          "
          >保存</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button
          @click="
            dialogVisible = false
            cancleButton()
          "
          >取消</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import { editgoodsCode } from '../../http/api'

export default {
  name: 'Newtable',
  props:['tableData2'],
  data() {
    return {
      ableData: {},
      ruleForm: {
        type: '', //商品类型
        coding: '', //商品编码
        name: '', //商品名称
        mold: '', //模具号
        provider: '', //供应商
        stylenumber: '', //款号
        ebusiness: '', //电商款号
        colour: '', //成色
        stone: '', //石料
        style: '', //款式
        color: '', //颜色
        specification: '', //商品规格
        anothername: '', //别名
        weight: '', //商品重量
        hand: '', //手寸
        price: '', //成本价
        wage_valuation: '', //销售工费计价类型
        saleprice: '', //销售价
        count: '', //库存计算
        classify: '', //商品提成分类
      },

      rules: {
        type: [{ required: true, message: '请输入商品类型', trigger: 'blur' }],
        coding: [
          { required: true, message: '请输入商品编码', trigger: 'blur' },
          { max: 20, message: '长度在 20个字符内', trigger: 'blur' },
        ],
        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        provider: [
          { required: true, message: '请输入供应商', trigger: 'blur' },
        ],
        colour: [{ required: true, message: '请输入成色', trigger: 'blur' }],
        stone: [{ required: true, message: '请输入石料', trigger: 'blur' }],
        style: [{ required: true, message: '请填写款式', trigger: 'blur' }],
        count: [{ required: true, message: '请填写库存计算', trigger: 'blur' }],
        weight: [{ required: true, message: '请填写重量', trigger: 'blur' }],
        price: [
          { required: true, message: '请填写成本价', trigger: 'blur' },
          { message: '成本价必须为数字', trigger: 'change' },
        ],
        saleprice: [
          { required: true, message: '请填写销售价', trigger: 'blur' },
          { message: '销售价必须为数字', trigger: 'change' },
        ],
      },

      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
    }
  },

  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch(() => {})
    },
    limitOrder() {
      // 要做长度判断
      console.log(this.ruleForm.phone)
      let code_str = String(this.ruleForm.phone)
      if (code_str.length > 11) {
        code_str = code_str.substr(0, code_str.length - 1)
        console.log(code_str.length)
        this.ruleForm.phone = Number(code_str)
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },

    submitForm(formName) {
        console.log('表单:',this.ruleForm);
        this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('请确认是否保存编辑?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            
          })
        .then(() => {
      editgoodsCode(this.ruleForm)
      .then((value)=>{
              console.log('编辑成功',value.msg)
        this.cancleButton()
        this.$parent.getCodeList()    
        })
        //修改成功后重新刷新当前表格


            .catch((err)=>{
              console.log('编辑失败',err)
        })

      console.log(this.ruleForm)
              this.$message({
                type: 'success',
                message: '编辑成功!',
              }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消编辑',
              });
            });

              console.log(this.ruleForm)
              //传给后端的数据（对象）
              let data = new URLSearchParams()
              for (var i in this.ruleForm) {
                data.append(i, this.ruleForm[i])
              }

              // 新增商品编码
              let obj =this.ruleForm
              this.$axios({
                url:'/product/add',
                method:'post',
                data:
                  obj
                
              }).then(res=>{
                console.log(res)
                // this.resetForm(formName)
              }).catch(err=>{
                console.log(err)
              })
            })
            }else {
          console.log('error submit!!')
          return false
        }
      })
    },

    cancleButton() {
      let a = document.getElementsByClassName('outside-container')[0]
      let b = document.getElementsByClassName('edit-newgoods-code')[0]
      a.style.transform = 'translateX(0px)'
      a.style.transition = 'all 1s'
      b.style.display = 'none'
    },
  },
}
</script>

<style scope>
.h2-title {
  width: 1380px;
  text-align: center;
}
.edit-newgoods-code {
  display: none;
}
.demo-ruleForm {
  width: 1300px;
  margin-left: 30px;
  /* border: 1px solid darkgray; */
  background-color: #f5f7fa;
  border-radius: 10px;
  padding: 20px 40px;
}
.operation-line {
  margin-top: 10px;
  margin-left: -100px;
}
</style>
